import React, { useState, useEffect } from 'react';
import { message } from 'antd';
import { useNavigate } from 'react-router-dom';
import SearchBar from './components/SearchBar';
import TabMenu from './components/TabMenu';
import PersonList from './components/PersonList';
import { useAIPersonList } from './hooks/useAIPersonList';
import { DEFAULT_LANGUAGE, DEFAULT_PERSON_TYPE } from './utils/constants';
import type { Language, PersonType } from './types';

// AI人员列表管理页面
const AiPersionList: React.FC = () => {
  // 路由导航
  const navigate = useNavigate();
  
  // 状态管理
  const [activeLanguage, setActiveLanguage] = useState<Language>(DEFAULT_LANGUAGE);
  const [activePersonType, setActivePersonType] = useState<PersonType>(DEFAULT_PERSON_TYPE);

  // 使用自定义Hook管理数据
  const { loading, personList, pagination, refreshList } = useAIPersonList();

  // 组件挂载时加载初始数据
  useEffect(() => {
    refreshList(activeLanguage, activePersonType);
  }, []);

  // 处理语言切换
  const handleLanguageChange = (language: Language) => {
    setActiveLanguage(language);
    // 切换语言时，重新加载第一页数据
    refreshList(language, activePersonType, 1);
  };

  // 处理人物类型切换
  const handlePersonTypeChange = (type: PersonType) => {
    setActivePersonType(type);
    // 切换类型时，重新加载第一页数据
    refreshList(activeLanguage, type, 1);
  };

  // 处理分页变化
  const handlePageChange = (page: number) => {
    refreshList(activeLanguage, activePersonType, page);
  };

  // 处理卡片点击
  const handleCardClick = (id: number) => {
    console.log(`跳转到编辑页面，ID: ${id}, Language: ${activeLanguage}`);
    navigate(`/EditAiInfor/${id}?language=${activeLanguage}`);
  };

  // 处理搜索（预留功能）
  const handleSearch = (searchValue: string) => {
    console.log('搜索关键字:', searchValue);
    // TODO: 实现搜索功能
    message.info('搜索功能暂未实现');
  };

  return (
    <div className="min-h-full bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 p-6">
      <div className="max-w-7xl mx-auto">
        {/* 搜索栏 */}
        {/* <SearchBar 
          onSearch={handleSearch} 
          onRefresh={() => refreshList(activeLanguage, activePersonType, pagination.page)}
        /> */}

        {/* 选项卡菜单 */}
        <TabMenu
          activeLanguage={activeLanguage}
          activePersonType={activePersonType}
          onLanguageChange={handleLanguageChange}
          onPersonTypeChange={handlePersonTypeChange}
          totalCount={pagination.total}
        />

        {/* 人员列表 */}
        <PersonList
          loading={loading}
          personList={personList}
          pagination={pagination}
          onPageChange={handlePageChange}
          onCardClick={handleCardClick}
          onRefresh={() => refreshList(activeLanguage, activePersonType, pagination.page)}
        />
      </div>
    </div>
  );
};

export default AiPersionList;
